<template>
	<view class="page">
		<!-- <scroll-view scroll-x="true" class="">
			<uni-segmented-control class="uni-segmented-control" :current="current" :values="items" style-type="text"
				:active-color="activeColor" @clickItem="onClickItem" />
		</scroll-view> -->
<!-- 		<view class="bgBox">
			<view class="dateBox">
			      <view v-for="(item,index) in same_week" 
				  :class="[same_day==item.date? 'activ' :'','dis']"
			        @click="()=>select(item)" :key='index'>
			        <text class="weekName">{{item.week}}</text>		      
			        <view class="dateName" >{{item.name}}</view>
			      </view>
			</view>
			<view class="right" >
				<text>{{month}}月</text>
			</view>
		</view> -->
		<!-- <view class="chooseBox">
			<view>
				类型
			</view>
			<view class="flex" @click="shaixuan(1)">
				<text>价格</text>
				<image class="sx" :src="'/static/sx'+price+'.png'"></image>
			</view>
			<view class="flex" @click="shaixuan(2)">
				<text>销量</text>
				<image class="sx" :src="'/static/sx'+sale+'.png'"></image>
			</view>
		</view> -->
		<view class="goods">
			<block v-for="(item,index) in goodList" :key="index"  >
				<view class="goodList"  @click="goDetail(item)">
						<image :src="item.mainPhotoP1"></image>
						<view class="textBox">
							<view class="title">{{item.proName}}</view>
							<view class="disc">已售{{item.mainSale}}件</view>
							<view class="priceBox">
								<view>￥{{item.proPrice}}</view>
								<text class="btnyy" size="mini">立即购买</text>
							</view>
						</view>
				</view>
			</block>
		</view>
		<!-- <uni-popup class="popYanZhengBox" ref="popYanZheng" type="center">
			<view class="popup-content">
				<view class="t">温馨提示</view>
				<view class="p">该微信未绑定系统内手机号，绑定手机号后正常使用。</view>
				<button class="start" type="default" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">绑定手机号</button>
			</view>
		</uni-popup> -->
    </view>
</template>

<script>
	import {findprolist} from "../../common/api.js"
		export default {
			data() {
				return {
			         	goodList:[
							{
								courseName:'',
								courseImg:'',
								courseDescribe:'',
								coursePrice:''
							}
						],
		
				}
			},
			created(){
				this.init()
			},
			methods: {
               init(){
				   findprolist().then(res=>{
					   console.log(res)
					   this.goodList=res.extend.pageInfo.list
				   })
			   },
			   goDetail(item){
				   uni.navigateTo({
				   	url: '/pages/index/recoveryDetail?proid='+item.proId,
					
				   });
			   }
			}
		}
		</script>
<style scope lang="scss" scoped>
	
.bgBox{
	width:100%;
	height:120rpx;
	display:flex;
	background:linear-gradient(to right , #ea8100 0%, #ea6011 40%);
	.dateBox{
		flex:1;
		height: 100%;
		display: flex;
		justify-content: space-around;
		color:#fff;
		.weekName{
			font-size: 12px;
		}
		.dateName{
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			
		}
		>view{
			width:50rpx;
			height:50rpx;
			text-align: center;
			line-height:50rpx;
		}
		.dis .dateName{
			background:transparent;
			color:#fff;
		}
		.activ .dateName{
			background:#fff;
			border-radius:50%;
			color:#ea6011;
					}
					
	}
    .right{
		color:#fff;
		font-size:18px;
		text-align:center;
		width:120rpx;
		line-height:120rpx;
		text-align: center;
		font-weight: bold;
		border-left:1px solid #fff;
		
	}
}
.goods{
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	width:750rpx;
	padding:25rpx 25rpx 0 25rpx;
	margin-bottom:30rpx;
	flex-wrap:wrap;
	
	.goodList{
		box-sizing: border-box;
		width:335rpx;
		display: flex;
		flex-direction: column;
		border-radius:20rpx;
		background:#fff;
		overflow: hidden;
		margin-bottom:20rpx;
		image{
			width:335rpx;
			height:280rpx;
			
		}
		.textBox{
			box-sizing: border-box;
			padding:10rpx;
			color:#666;
			.title{
			    	width:100%;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  white-space: nowrap;
				  font-size:12px;
				  color:#000;
				  margin-bottom:15rpx;
				  font-weight: bold;
			}
			.disc{
			    display: -webkit-box;
			    -webkit-line-clamp: 2;
			    -webkit-box-orient: vertical;
			    overflow: hidden;
			    text-overflow: ellipsis;
	            font-size:12px;
				height:32px;
			}
			.priceBox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top:15rpx;
				font-size:12px;
				.btnyy{
					font-size:12px;
					padding:5px 8px;
					border-radius: 5px;
					color:#fff;
					background:#ea6011;
				}
				.btnyy1{
					background:#ddd;
				}
			}
		}
		
	}
}
.color{
	font-size:14px;
	color:#ea6011;
	font-weight: bold;
}
.unit{
	font-size:12px;
}
.chooseBox{
	box-sizing:border-box;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	background:#fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:10rpx 25rpx;
	font-size:14px;
	.flex{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	.sx{
		width:16px;
		height:16px;
	}
	}
}
 ::v-deep {
	.uni-segmented-control{
		box-sizing: border-box;
		height:45px!important;
		background-color: #fff;
		
	}
	.segmented-control{
		overflow-x: auto!important;
		height:45px!important;
		background-color: #fff;
	} 
	.segmented-control__text{
		font-weight: bold;
	}
 }
</style>
